<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="lib/jquery.js"></script>
    <link rel="stylesheet" href="../../src/css/common/common.css">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;box-sizing: border-box;}

        .cart-box{
            /*position: absolute;
            right: 10px;
            top: 42px;*/
            max-height: 400px;
            min-width: 400px;
            padding: 15px;
            border: 1px solid #ccc;
            background: #fff;
            overflow-y: auto;
            z-index: 99;
        }
        .cart-box a{
            color:#333;
            text-decoration: none;
        }

        /*列表*/
        .cart-box .item-list{
            margin-bottom: 10px;
            overflow: hidden;
        }

        /*图片组*/
        .cart-box .item-list .list-img{
            display: inline-block;
            float: left;
            width: 90px;
            height:90px;
            text-decoration: none;
        }
        .cart-box .item-list .list-img img{
            max-height: 100%;
            max-width: 100%;
        }

        /*详情组*/
        .cart-box .item-list .list-detail{
            float: left;
            width: calc(100% - 90px);
            padding-left:10px;
        }

        .cart-box .item-list .list-detail .detail-title{
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: bold;
        }
        .cart-box .item-list .list-detail .detail-attr{ }

        /*按钮组*/
        .box-button{
            margin-top: 20px;
        }
        .box-button .btn-a,.box-button .btn-b{
            width: 49%;
        }
        .box-button .btn-a{
            float: left;
        }
        .box-button .btn-b{
            float: right;
        }


        /**
         ** @公共组件类
         **/
        .cart-box .btn-a,.cart-box .btn-b{
            display: inline-block;
            padding:10px;
            text-align: center;
            transition: opacity .3s;
        }
        .cart-box .btn-a:hover,.cart-box .btn-b:hover{
            opacity: .8;
        }
        .cart-box .btn-a{
            color: #fff;
            border-color: #ab85f7;
            background: #ab85f7;
        }
        .cart-box .btn-b{
            color: #fff;
            border-color: #4f9cc0;
            background: #4f9cc0;
        }
    </style>
</head>
<body>

    <section class="cart-box">
        <!--商品box-->
        <div class="item-list">
            <a href="" class="list-img">
                <img src="http://pr.aopcdn.com/goods/MY19012208/MY19012208_bc1180bbb5.jpg@!h320-w320" alt="">
            </a>
            <div class="list-detail">
                <div class="detail-title"><a href="">name short</a></div>
                <p class="detail-attr">
                    <label>Unit Price: </label>
                    <span>12.56</span>
                </p>
                <p class="detail-attr">
                    <label>color: </label>
                    <span>red</span>
                </p>
                <p class="detail-attr">
                    <label>size: </label>
                    <span>xxl</span>
                </p>
            </div>
        </div>

        <!--按钮box-->
        <div class="box-button">
            <a href="" class="btn-a">check</a>
            <a href="" class="btn-b">view cart</a>
        </div>
    </section>


</body>

<script>
    var options = [
        {
            value: 'zhinan',
            label: '指南',
            children: [
                {
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [
                        {
                            value: 'yizhi',
                            label: '一致'
                        },
                        {
                            value: 'fankui',
                            label: '反馈'
                        },
                        {
                            value: 'xiaolv',
                            label: '效率'
                        },
                        {
                            value: 'kekong',
                            label: '可控'
                        }
                    ]
                },
                {
                    value: 'daohang',
                    label: '导航',
                    children: [
                        {
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        },
                        {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }
                    ]
                }
            ]
        },
        {
            value: 'zujian',
            label: '组件',
            children: [
                {
                    value: 'basic',
                    label: 'Basic',
                    children: [
                        {
                            value: 'layout',
                            label: 'Layout 布局'
                        },
                        {
                            value: 'color',
                            label: 'Color 色彩'
                        },
                        {
                            value: 'typography',
                            label: 'Typography 字体'
                        },
                        {
                            value: 'icon',
                            label: 'Icon 图标'
                        },
                        {
                            value: 'button',
                            label: 'Button 按钮'
                        }
                    ]
                },
                {
                    value: 'others',
                    label: 'Others',
                    children: [
                        {
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        },
                        {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        },
                        {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        },
                        {
                            value: 'card',
                            label: 'Card 卡片'
                        },
                        {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        },
                        {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }
                    ]
                }
            ]
        },
        {
            value: 'ziyuan',
            label: '资源',
            children: [
                {
                    value: 'axure',
                    label: 'Axure Components',
                    children:[
                        {
                            value:'lalla',
                            label:'nihao',
                            children:[
                                {
                                    value:'789',
                                    label:'fdsfsdfdsf'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'sketch',
                    label: 'Sketch Templates'
                },
                {
                    value: 'jiaohu',
                    label: '组件交互文档'
                }
            ]
        }
    ]

    console.log(renderState(options,'jiaohu'));
    function renderState(source,val,isOpen){
        return source.map(function(item,index){
            if(item.children && item.children.length>=1){
                if(isOpen){
                    item.checked = true;
                    item.children = renderState(item.children,val,true);
                }else{
                    if(item.value == val){
                        item.checked = true;
                        item.children = renderState(item.children,val,true);
                    }else{
                        item.checked = false;
                        item.children = renderState(item.children,val);
                    }
                }
                return item;

            }else{
                if(isOpen){
                    item.checked = true;
                }else{
                    if(item.value == val){
                        item.checked = true;
                    }else{
                        item.checked = false;
                    }
                }
                return item;
            }
        });
    }
    function renderState2(options){
        var arr = [];
        $.each(options,function(index,item){
            var obj = {
                label:item.label,
                value:item.value,
            };
            if(item.children && item.children.length>=1){
                obj.children = renderState2(item.children)
            }
            arr.push(obj);
        });
        return arr;
    }


    var arrOne = [];

    function renderState3(options,parentValue){
        //var arr = [];
        $.each(options,function(index,item){
            var name = item.value;
            var checked = item.checked ? item.checked : false;
            if(parentValue){
                name = parentValue + ","+ item.value;
            }
            /*var obj = {
                label:item.label,
                value:item.value,
            };*/
            if(item.children && item.children.length>=1){
                renderState3(item.children,name);
                //obj.children = renderState3(item.children,name)
            }else{
                var obj = {
                    val:name,
                    checked:checked
                }
                arrOne.push(obj)
            }
            //arr.push(obj);
        });
        //return arr;
    }

    //renderState3(options);
    //console.log(arrOne)
</script>

</html>